<template>
	<el-card>
		<div class="scheduleRecordDivClass">
			<el-form :inline="true" :model="state.queryForm">
				<el-form-item prop="remark">
					<el-input v-model="state.queryForm.remark" placeholder="操作内容"></el-input>
				</el-form-item>
				<el-form-item prop="operateType">
					<el-select v-model="state.queryForm.operateType" style="width: 180px" placeholder="请选择操作类型">
						<el-option label="新增EMPI" value="新增EMPI"></el-option>
						<el-option label="编辑EMPI" value="编辑EMPI"></el-option>
						<el-option label="删除EMPI" value="删除EMPI"></el-option>
						<el-option label="批量删除EMPI" value="批量删除EMPI"></el-option>
						<el-option label="忽略操作" value="忽略操作"></el-option>
						<el-option label="批量忽略操作" value="批量忽略操作"></el-option>
						<el-option label="合并操作" value="合并操作"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker
						v-model="state.queryForm.startOperateTime"
						type="datetime"
						placeholder="开始时间"
						format="YYYY-MM-DD HH:mm"
						time-format="HH:mm"
						@change="dataSTChange"
					/>
					<!-- <el-date-picker v-model="dateTime" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
						style="width: 300px" format="YYYY-MM-DD HH:mm" time-format="HH:mm" @change="dateTimeChange" /> -->
				</el-form-item>
				<el-form-item>
					<el-date-picker
						v-model="state.queryForm.endOperateTime"
						type="datetime"
						placeholder="结束时间"
						format="YYYY-MM-DD HH:mm"
						time-format="HH:mm"
						@change="dataETChange"
					/>
					<!-- <el-date-picker v-model="dateTime" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
						style="width: 300px" format="YYYY-MM-DD HH:mm" time-format="HH:mm" @change="dateTimeChange" /> -->
				</el-form-item>

				<el-form-item>
					<el-button :icon="Search" @click="searchBtn" type="primary">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Refresh" @click="resets">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table
				v-loading="state.dataListLoading"
				:data="state.dataList"
				border
				row-key="empi"
				max-height="calc(100vh - 300px )"
				style="width: 100%"
				@selection-change="selectionChangeHandle"
			>
				<el-table-column prop="operateLogId" label="日志ID" width="250" align="center"></el-table-column>
				<el-table-column prop="operateTime" label="操作时间" header-align="center" align="center"></el-table-column>
				<el-table-column prop="operateType" label="操作类型" header-align="center" align="center"></el-table-column>
				<el-table-column prop="remark" label="操作内容" header-align="center" align="center"></el-table-column>
				<el-table-column prop="operatorId" label="操作人" header-align="center" align="center"></el-table-column>

				<!-- <el-table-column label="操作" fixed="right" header-align="center" align="center" width="180">
					<template #default="scope">
						<el-button type="primary" link @click="seeOrUpdateHandle(scope.row.empi, 'see')">查看</el-button>
						<el-button type="primary" link @click="seeOrUpdateHandle(scope.row.empi, 'edit')">编辑</el-button>
						<el-button type="danger" link @click="deleteIdHandle(scope.row.empi, `确认删除主索引【${scope.row.empi}】`)">删除</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<el-pagination
				:current-page="state.page"
				:page-sizes="state.pageSizes"
				:page-size="state.limit"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks/indexZSY.ts'
import { onMounted, reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'

import { ElMessage, ElMessageBox } from 'element-plus/es'
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'
import timeFormater from 'time-formater'
const dateTime = ref([])

const state: IHooksOptions = reactive({
	dataListUrl: '/empi/empioperatelog/page',
	queryForm: {
		startOperateTime: '',
		endOperateTime: '',
		operateType: '',
		remark: ''
	},
	dataListSelections: []
})
const idCrdCode = ref('01')

const seeOrUpdateRef = ref()

const addPatientRef = ref()
const addPatient = () => {
	addPatientRef.value.init()
}

const seeOrUpdateHandle = (id, type) => {
	seeOrUpdateRef.value.init(id, type)
}

const searchBtn = () => {
	state.page = 1
	getDataList()
}

const resets = () => {
	state.queryForm = {
		startOperateTime: '',
		endOperateTime: '',
		operateType: '',
		remark: ''
	}

	dateTime.value = []
	state.dataListSelections = []

	state.page = 1
	state.limit = 10

	getDataList()
}

// const dateTimeChange = e => {
// 	dateTime.value = e
// 	if (e) {
// 		state.queryForm.startOperateTime = timeFormater(e[0]).format('YYYY-MM-DD HH:mm')
// 		state.queryForm.endOperateTime = timeFormater(e[1]).format('YYYY-MM-DD HH:mm')
// 	} else {
// 		state.queryForm.startOperateTime = ''
// 		state.queryForm.endOperateTime = ''
// 	}
// }

const dataSTChange = e => {
	if (e) {
		if (state.queryForm.endOperateTime && new Date(e).getTime() > new Date(state.queryForm.endOperateTime).getTime()) {
			ElMessage.warning('开始时间不能大于结束时间，请重新选择时间')
			state.queryForm.startOperateTime = ''
			return
		}
		state.queryForm.startOperateTime = timeFormater(e).format('YYYY-MM-DD HH:mm')
	} else {
		state.queryForm.startOperateTime = ''
	}
}
const dataETChange = e => {
	if (e) {
		if (state.queryForm.startOperateTime && new Date(e).getTime() < new Date(state.queryForm.startOperateTime).getTime()) {
			ElMessage.warning('结束时间不能小于开始时间，请重新选择时间')
			state.queryForm.endOperateTime = ''
			return
		}
		state.queryForm.endOperateTime = timeFormater(e).format('YYYY-MM-DD HH:mm')
	} else {
		state.queryForm.endOperateTime = ''
	}
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle } = useCrud(state)
</script>

<style lang="scss"></style>
